<template>
    <view class="p-20">
        <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
            <template #refresher="{refresherStatus}">
                <custom-refresher :status="refresherStatus" />
            </template>
            <template #loadingMoreNoMore>
                <custom-nomore />
            </template>
            <view class="" v-for=" (item,index) in dataList" :key="index">
                <view class=" bg-white p-20 flex col-center row-between m-b-20 box_shadow br12">
                    <u-image :src="`${IMG_BASE_URL}${item.photoAddress}`" mode="" width="160rpx" height="160rpx"
                        @click="previewImage(item.photoAddress)">
                    </u-image>
                    <view class="">
                        <view class=" bold x">
                            商品编号：{{item.productNo}}
                        </view>
                        <view class="m-t-10">
                            <span>
                                品牌：{{ getBrandName(item.brand) }}
                            </span>
                            <span class="m-l-10">系列：{{item.productModel}}</span>
                        </view>
                    </view>
                    <view class="m-t-60">
                        <u-tag text="编辑" type="primary" @click="openPopup(item)"></u-tag>
                    </view>
                </view>
            </view>
            <u-popup v-model="showPopup" mode="right" length="80%">
                <view class="p-20">
                    <uni-forms :model="goodsInfo">
                        <uni-forms-item label="商品编号">
                            <uni-easyinput disabled v-model="goodsInfo.productNo" type="text" border="none" />
                        </uni-forms-item>
                        <uni-forms-item label="品牌">
                            <uni-data-select v-model="goodsInfo.brand" :localdata="brandList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="颜色">
                            <uni-easyinput v-model="goodsInfo.colour" type="text" border="none" placeholder="请输入颜色" />
                        </uni-forms-item>
                        <uni-forms-item label="系列">
                            <!-- <uni-data-select v-model="goodsInfo.model" v-if="seriesList.length > 0"
                               :localdata="seriesList" @change="handleChange"></uni-data-select>
                           <uni-easyinput v-model="goodsInfo.productModel" v-else type="text" border="none"
                               placeholder="请输入系列" /> -->
                            <uni-easyinput v-model="goodsInfo.productModel" type="text" border="none"
                                placeholder="请输入系列" />
                        </uni-forms-item>
                        <uni-forms-item label="上传图片">
                            <uni-file-picker v-model="fileList" return-type="object" file-mediatype="image"
                                @select="handleSelect">
                            </uni-file-picker>
                        </uni-forms-item>
                        <uni-forms-item label="单位">
                            <uni-easyinput disabled v-model="goodsInfo.unit" type="text" border="none" />
                        </uni-forms-item>
                        <uni-forms-item label="表壳">
                            <uni-data-select v-model="goodsInfo.watchMaterial"
                                :localdata="watchMaterialList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="表圈">
                            <uni-data-select v-model="goodsInfo.watchBezel"
                                :localdata="watchBezelList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="表盘">
                            <uni-data-select v-model="goodsInfo.dialPlate" :localdata="dialPlateList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="表盘尺寸">
                            <uni-easyinput v-model="goodsInfo.dialSize" type="text" border="none"
                                placeholder="请输入表盘尺寸" />
                        </uni-forms-item>
                        <uni-forms-item label="表带">
                            <uni-data-select v-model="goodsInfo.materialStrap"
                                :localdata="materialStrapList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="手围尺寸">
                            <uni-easyinput v-model="goodsInfo.handCircumferenceSize" type="text" border="none"
                                placeholder="请输入手围尺寸" />
                        </uni-forms-item>
                        <uni-forms-item label="销售价格">
                            <uni-easyinput v-model="goodsInfo.salesPrice" type="text" border="none"
                                placeholder="请输入销售价格" />
                        </uni-forms-item>
                        <uni-forms-item label="采购价格">
                            <uni-easyinput v-model="goodsInfo.procurementPrice" type="text" border="none"
                                placeholder="请输入采购价格" />
                        </uni-forms-item>
                        <uni-forms-item label="成色">
                            <uni-data-select v-model="goodsInfo.colorQuality"
                                :localdata="colorQualityList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="手表类型">
                            <uni-data-select v-model="goodsInfo.watchType" :localdata="watchTypeList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="状态">
                            <uni-data-select v-model="goodsInfo.productStatus"
                                :localdata="productStatusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="保卡">
                            <uni-data-select v-model="goodsInfo.warrantyPeriod"
                                :localdata="warrantyPeriodList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="库存">
                            <uni-easyinput disabled v-model="goodsInfo.procurementInventory" type="text" border="none"
                                placeholder="请输入库存" />
                        </uni-forms-item>
                        <uni-forms-item label="是否售出">
                            <uni-data-select v-model="goodsInfo.sold" :localdata="soldList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="鉴定信息">
                            <uni-data-select v-model="goodsInfo.authenticate"
                                :localdata="authenticateList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="是否借出">
                            <uni-data-select v-model="goodsInfo.lendingStatus"
                                :localdata="lendingStatusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="是否上架">
                            <uni-data-select v-model="goodsInfo.listingStatus"
                                :localdata="listingStatusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="物流编号">
                            <uni-easyinput v-model="goodsInfo.logisticsNo" type="text" border="none"
                                placeholder="请输入物流编号" />
                        </uni-forms-item>
                    </uni-forms>
                    <view class="flex row-around">
                        <u-button @click="showPopup = false">取消</u-button>
                        <u-button type="primary" @click="submit()">保存</u-button>
                    </view>
                </view>
            </u-popup>
        </z-paging>
    </view>
</template>

<script setup>
    import {
        apiGetGoodsList,
        apiGetAllBrand,
        apiUpdateGoods
    } from '@/api/index.js'
    import {
        ref
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        IMG_BASE_URL,
        API_BASE_URL
    } from '@/utils/appConfig.js'
    import {
        onPageScroll,
        onReachBottom
    } from '@dcloudio/uni-app';
    import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

    const dataList = ref([])
    const brandList = ref([])
    const paging = ref(null)
    const showPopup = ref(false)
    const goodsInfo = ref({})

    const fileList = ref([])
    const watchMaterialList = [{
        text: '金属',
        value: '0'
    }, {
        text: '钛合金',
        value: '1'
    }, {
        text: '铝合金',
        value: '2'
    }, {
        text: '贵金属',
        value: '3'
    }, {
        text: '陶瓷',
        value: '4'
    }, {
        text: '复合材料',
        value: '5'
    }]
    const watchBezelList = [{
        text: '原钻',
        value: '0'
    }, {
        text: '后钻',
        value: '1'
    }, {
        text: '原表圈',
        value: '2'
    }, {
        text: '后改圈',
        value: '3'
    }]
    const dialPlateList = [{
        text: '原盘',
        value: '0'
    }, {
        text: '后换盘',
        value: '1'
    }]
    const materialStrapList = [{
        text: '硅胶',
        value: '0'
    }, {
        text: '钢带',
        value: '1'
    }, {
        text: '皮带',
        value: '2'
    }, {
        text: '尼龙',
        value: '3'
    }, {
        text: '编织',
        value: '4'
    }, {
        text: '牛皮',
        value: '5'
    }, {
        text: '鳄鱼皮',
        value: '6'
    }, {
        text: '手镯款',
        value: '7'
    }]
    const colorQualityList = [{
        text: '99',
        value: '0'
    }, {
        text: '98',
        value: '1'
    }, {
        text: '95',
        value: '2'
    }, {
        text: '85',
        value: '3'
    }, {
        text: '80',
        value: '4'
    }]
    const watchTypeList = [{
        text: '机械',
        value: '0'
    }, {
        text: '石英',
        value: '1'
    }]
    const productStatusList = [{
        text: '翻新完成',
        value: '0'
    }, {
        text: '翻新中',
        value: '1'
    }, {
        text: '未翻新',
        value: '2'
    }]
    const warrantyPeriodList = [{
        text: '无',
        value: '0'
    }, {
        text: '在保',
        value: '1'
    }, {
        text: '过期',
        value: '2'
    }]
    const soldList = [{
        text: '已售',
        value: '1'
    }, {
        text: '在库',
        value: '2'
    }]
    const authenticateList = [{
        text: '已鉴定',
        value: '1'
    }, {
        text: '未鉴定',
        value: '2'
    }]
    const lendingStatusList = [{
        text: '未借出',
        value: '0'
    }, {
        text: '已借出',
        value: '1'
    }]
    const listingStatusList = [{
        text: '下架',
        value: '0'
    }, {
        text: '上架',
        value: '1'
    }]

    const previewImage = (url) => {
        uni.previewImage({
            current: `${IMG_BASE_URL}${url}`,
            urls: [`${IMG_BASE_URL}${url}`]
        });
    }

    const openPopup = (item) => {
        showPopup.value = true
        goodsInfo.value = item
        if (goodsInfo.value.photoAddress) {
            fileList.value = [{
                url: `${IMG_BASE_URL}${goodsInfo.value.photoAddress}`,
                name: goodsInfo.value.photoName,
                extname: goodsInfo.value.photoName.split('.').pop()
            }]
        }
    }

    const queryList = (pageNo, pageSize) => {
        const params = {
            current: pageNo,
            pageSize: pageSize,
        }
        apiGetGoodsList(params).then(res => {
            paging.value.complete(res.data.list.records);
        }).catch(res => {
            paging.value.complete(false);
        })
    }

    //查询品牌名称
    const getBrandName = (bid) => {
        const brand = brandList.value.find(item => item.value == bid)
        return brand ? brand.text : ''
    }

    //获取全部分类
    const getAllBrandList = () => {
        apiGetAllBrand().then(res => {
            brandList.value = res.data.map(item => {
                return {
                    text: item.brandName,
                    value: item.id
                }
            })
        })
    }

    //选择图片
    const handleSelect = (files) => {
        let file = files.tempFiles[0]
        uploadImage(file)
    }
    //上传图片
    const uploadImage = (file) => {
        uni.uploadFile({
            url: `${API_BASE_URL}/seven/secondHandWarehouse/photoUpload`,
            filePath: file.path,
            name: 'file',
            formData: {
                id: goodsInfo.value.id // 附加参数
            },
            header: {
                'Authorization': uni.getStorageSync('token')
            },
            success: (res) => {
                let data = JSON.parse(res.data)
                goodsInfo.value.photoAddress = data.data
                // console.log(data);
                uni.showToast({
                    title: `图片上传成功`
                })
            },
            fail: (err) => {
                console.log(err, 'err');
            }
        })
    }

    const submit = async () => {
        const regex = /[.,\/#!$%\^&\*;:{}=\-_`~()，。、；：「」【】《》？！…]/g;
        try {
            const {
                handCircumferenceSize,
                dialSize
            } = goodsInfo.value;
            goodsInfo.value.handCircumferenceSize = handCircumferenceSize ?
                `${handCircumferenceSize}${handCircumferenceSize.includes('cm') ? '' : 'cm'}` : '0cm'
            goodsInfo.value.dialSize = dialSize ? `${dialSize}${dialSize.includes('mm') ? '' : 'mm'}` : '0mm'
            if (regex.test(goodsInfo.value.colour)) {
                uni.$u.toast('颜色不能输入标点符号')
                return
            }
            let res = await apiUpdateGoods({
                ...goodsInfo.value
            })
            if (res.code == 200) {
                uni.$u.toast('修改成功')
                setTimeout(() => {
                    showPopup.value = false
                }, 1000)
            }
        } catch (err) {

        }
    }
    useZPaging(paging)
    onLoad((option) => {
        getAllBrandList()
    })
</script>